<template>
	<div class="holiday">
		<div class="title">节假日管理</div>
		<div class="addAndSearch">
			<Form :model="holidayMsg" label-position="right" :label-width="100" inline >		      
				<Row>
        	<Col span="8">
		        	<FormItem label="过滤">
			          <DatePicker type="daterange" placement="bottom-start" placeholder="选择日期范围" style="width: 200px" v-model="filterDate" @on-clear="clearDate"></DatePicker>
			        </FormItem>
        	</Col>
	        <Col span="8">
	        	<FormItem>
	        	    <Button type="success" @click="filter">查询</Button>
	        	    <Button type="info" @click="isAdd = true">新增</Button>
	        	</FormItem>
	        </Col>
        </Row>
		  </Form>
		</div>
		<div>
	      <Table border ref="selection" :columns="columns" :data="data" class="holiday-table" height="400"></Table>
	  </div>
		<Modal
        title="节假日信息修改"
        v-model="isEdit"
        class-name="vertical-center-modal"
				ok-text="保存"
				@on-ok="keep">
      <Form label-position="left" :label-width="100">
        <FormItem label="日期" required>
            <DatePicker type="daterange" placement="bottom-start" placeholder="选择日期范围" style="width: 200px" v-model="editTimes"></DatePicker>
        </FormItem>
        <FormItem label="类型">
            <Select v-model="type" style="width:200px">
                <Option value="工作日">工作日</Option>
                <Option value="休息日">休息日</Option>
            </Select>
        </FormItem>
        <FormItem label="法定节假日">
            <Checkbox v-model="isHoliday"></Checkbox>
        </FormItem>
        <FormItem label="备注">
            <Input v-model="editName" style="width: 200px"></Input>
        </FormItem>
    	</Form>
    	<div slot="footer">
    		<Button type="text" @click="isEdit=false">取消</Button>
    		<Button type="primary" @click="keep">确定</Button>
    	</div>
    </Modal>
		<Modal
        title="新增节假日信息"
        v-model="isAdd"
        class-name="vertical-center-modal">
      <Form label-position="left" :label-width="100" :model="holidayMsg">
        <FormItem label="日期" required>
            <DatePicker type="daterange" placement="bottom-start" placeholder="选择日期范围" style="width: 200px" v-model="holidayMsg.times" ></DatePicker>
        </FormItem>
        <FormItem label="类型" required>
            <Select v-model="holidayMsg.type" style="width:200px">
                <Option value="工作日">工作日</Option>
                <Option value="休息日">休息日</Option>
            </Select>
        </FormItem>
        <FormItem label="法定节假日">
           <Checkbox v-model="holidayMsg.isHoliday"></Checkbox>
        </FormItem>
        <FormItem label="备注">
            <Input v-model="holidayMsg.remark" style="width: 200px"></Input>
        </FormItem>
    	</Form>
    	<div slot="footer">
    		<Button type="text" @click="isAdd=false">取消</Button>
    		<Button type="primary" @click="add">确定</Button>
    	</div> 
    </Modal>
	</div>
</template>

<script>
import moment from 'moment'
	export default {
		data () {
			return {
				holidayMsg: {
					times: '',
					type: '',
					isHoliday: false,
					remark: ''
				},
				filterDate: '',
				isFilter: false,
				isEdit: false,       //编辑框弹出
				isAdd: false,        //新增对话框
				columns: [
					{
						title: '日期',
						key: 'times',
						sortable: true,
						align: 'center',
					},
					{
						title: '类型',
						key: 'type',
						filters: [
							{
								label: '工作日',
								value: 1
							},
							{
								label: '休息日',
								value: 2
							}
						],
						filterMultiple: false,
						filterMethod (value, row) {
              if (value === 0) {
                  return row.type == '工作日' || row.type == '休息日';
              } else if (value === 1) {
                  return row.type == '工作日';
              } else {
              	return row.type == '休息日'
              }
            },
						align: 'center'
					},
					{
						title: '法定节假日',
						key: 'isHoliday',
						align: 'center'
					},
					{
						title: '备注',
						key: 'remark',
						align: 'center',
					},
					{
						title: '操作',
						key: 'handle',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small',
											icon: 'edit'
										},
										style: {
											marginRight: '5px',
											fontSize: '16px',
											width: '40px'
										},
										on: {
											click: () => {
												this.edit(params.row)
											}
										}
									}),
									h('Button', {
										props: {
											type: 'error',
											size: 'small',
											icon: 'trash-a'
										},
										style: {
											fontSize: '16px',
											width: '40px'
										},
										on: {
											click: () => {
													this.remove(params.row.times)
											}
										}
									})
							]);
						}
					}
				],
				lists: [
					{
						times: '2018-10-01 - 2018-10-07',
						type: '休息日',
						isHoliday: '是',
						remark: '国庆节'
					},
					{
						times: '2018-06-16 - 2018-06-18',
						type: '休息日',
						isHoliday: '是',
						remark: '端午节'
					},
					{
						times: '2018-06-25 - 2018-06-30',
						type: '工作日',
						isHoliday: '否',
						remark: ''
					},
				],
				editName: '',
				editTimes: '',
				type: '',
				isHoliday: false,
				index: 0
			}
		},
		methods: {
			add () { //新增
				if(!this.holidayMsg.times[0] || !this.holidayMsg.type) {
					this.$Message.info('请完善表格内容')
					return
				}
				this.holidayMsg.times = this.holidayMsg.times.map(item => {
					return moment(item).format('YYYY-MM-DD')
				}).join(' - ')
				this.lists.push({times: this.holidayMsg.times,type: this.holidayMsg.type,isHoliday: this.holidayMsg.isHoliday ? '是' : '否', remark: this.holidayMsg.remark})
				this.holidayMsg = {}
				this.isAdd = false
			},
			clearDate(){ //清除日期选择器时
				this.isFilter = false
			},
			remove (times) { //删除
				let index = this.findIndex(this.lists,times)
				this.$Modal.confirm({
					content: '是否确认删除该项记录',
					onOk: () => {
						this.lists.splice(index,1)
					}
				})
			},
			findIndex(arr,times){ //查找某一行数据索引
				return arr.findIndex(item => {
					return item.times == times
				})
			},
			edit(row){ //编辑修改
				this.isEdit = true
				this.editName = row.remark
				this.editTimes = row.times.split(' - ').map(item=>{
					return new Date(item)
				})
				this.type = row.type
				this.isHoliday = row.isHoliday === '是' ? true : false
				this.index = this.findIndex(this.lists,row.times)
			},
			filter(){ //查询
				if(!this.filterDate[0]) {
					this.$Message.info('请输入要查询的日期范围')
					return
				}
				this.isFilter = true
							
			}, 
			keep(){ //保存修改
				let isDate = this.editTimes.every(item => {
					return item instanceof Date
				})
				if (!isDate) {
					this.$Message.info('请选择正确的日期范围')
					this.isEdit = true
				}else {
					this.lists[this.index].times = this.editTimes.map(item => {
						return moment(item).format('YYYY-MM-DD')
					}).join(' - ')
					this.lists[this.index].type = this.type
					this.lists[this.index].isHoliday = this.isHoliday ? '是' : '否'
					this.lists[this.index].remark = this.editName	
					this.isEdit = false
				}						
			}
		},
		computed: {
			data () {
				if(!this.isFilter) {
					return this.lists
				}else {
					let startDate = + new Date(this.filterDate[0])
					let endDate = + new Date(this.filterDate[1])
					return this.lists.filter(item => {
						const time = + new Date(item.times.substr(0,10))
						return time > startDate && time < endDate
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.holiday {
	.title {
		font-weight: 500;
		height: 60px;
		line-height: 40px;
		font-size: 20px;
		padding: 20px 0 0 20px;
		border-bottom: 1px solid #ccc;
	}
	.addAndSearch {
		margin: 60px 100px;
	}
	.holiday-table {
		margin: 0 80px;
	}
	.clear {
		margin-left: 100px;
		margin-top: 40px;
	}
	.vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
}
</style>